<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: #fcc;
        }
        
        .k {
            width: 550px;
            height: 400px;
            background: #fff;
            border-radius: 20px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            padding: 20px;
        }
        
        h1 {
            margin-bottom: 30px;
        }
        
        input {
            width: 290px;
            height: 20px;
            border-radius: 10px;
            margin: 10px 0;
            outline: none;
            font-size: 20px;
            padding: 5px;
            border: 1px solid black;
        }
        
        span {
            font-size: 20px;
        }
        
        .denglu,
        .zhuce {
            width: 70px;
            height: 30px;
            line-height: 30px;
            padding: 0;
            border: none;
            border-radius: 2px;
            margin: 30px;
        }
        
        .denglu {
            background: #96CDCD;
        }
        
        .zhuce {
            background: #FFC125;
        }
        
        .denglu:active,
        .zhuce:active {
            opacity: 0.8;
        }
        
        .tishi {
            background: rgba(0, 0, 0, 0.5);
            height: 50px;
            width: 250px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            position: fixed;
            left: 0;
            right: 0;
            top: 30px;
            margin: auto;
            display: none;
        }
    </style>
</head>

<body>
    <div class="k">
        <h1>登录</h1>
        <span>账户：</span>
        <input type="text" class="zhanghu" placeholder="请输入账号"><br>
        <span>密码：</span>
        <input type="password" class="mima" placeholder="请输入密码"><br>
        <span style="display: inline-block;font-size: 16px;">保存密码</span>
        <input type="checkbox" id="baocun" style="width: 15px;margin-right: 65px;height: 15px;">
        <select name="" id="yonghu">
            <option>教师</option>
            <option selected>学生</option>
        </select><br>
        <input type="button" value="登录" class="denglu">
        <input type="button" value="注册" class="zhuce">
    </div>
    <div class="tishi">请输入正确的账号和密码</div>
</body>
<script src="jquery.min.js"></script>
<script src="citys.js"></script>
<script>
    if (localStorage.getItem("zhuanghu")) {
        $(".zhanghu").val(localStorage.getItem("zhuanghu"))
        $(".mima").val(localStorage.getItem("mima"))
        document.getElementById("baocun").checked = true
    }
    if (localStorage.getItem("yonghu") === "教师") {
        console.log($("#yonghu option")[0])
        $("#yonghu option")[0].selected = true
        $("#yonghu option")[1].selected = false
    }
    $(document).keyup(function(e) {
        if (e.keyCode === 13) {
            deng()
        }
    })
    $(".zhuce").click(function() {
        window.location.href = `${url}/zhuce.html`
    })
    $(".denglu").click(function() {
        deng()
    })

    function deng() {

        $.ajax({
            url: `${url}/denglu`,
            data: {
                zhang: $(".zhanghu").val(),
                mima: $(".mima").val()
            },
            success(data) {
                let b = data.replace("成功", "")
                if (data.substring(0, 2) === "成功") {
                    $(".tishi").html("登录成功").fadeIn().fadeOut(() => {
                        sessionStorage.setItem("denglule", b);
                        if (document.getElementById("baocun").checked) {
                            localStorage.setItem("zhuanghu", $(".zhanghu").val())
                            localStorage.setItem("mima", $(".mima").val())
                            localStorage.setItem("yonghu", $("#yonghu").find("option:selected").html())
                        } else {
                            localStorage.removeItem("zhuanghu")
                            localStorage.removeItem("mima")
                            localStorage.setItem("yonghu", $("#yonghu").find("option:selected").html())
                        }
                        let aa = localStorage.getItem("yonghu")
                        if (aa === "教师") {
                            window.location.href = `${url}/xue.html`
                        } else {

                        }

                    })
                } else {
                    $(".tishi").html(data).fadeIn().fadeOut()
                }
            }
        })
    }
</script>

</html>